<template>
    <div class="bar_bottom" @click="getBarproGress">
        <el-slider v-model="value" :show-tooltip="false"></el-slider>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: 0,
            bar_persent: 0,
        }
    },
    methods: {
        getBarproGress(){
            this.bar_persent = this.value / 100;
            this.$emit('bar_click', this.bar_persent );
        },
        setProgress(bar_persent){
            this. value = bar_persent * 100;
        },
    },
}
</script>

<style>
.bar_bottom{ margin-top: 14px;}
.bar_bottom .el-slider{ }
.bar_bottom .el-slider__button-wrapper{ width:10px!important; height: 10px!important; top: -12px!important; }
.bar_bottom .el-slider__button{ border: none!important; width:10px!important; height: 10px!important; width: 10px!important; }
.bar_bottom .el-slider__runway{ width:560px; height: 4px!important; background-color: #454546!important; }
.bar_bottom .el-slider__bar{ height: 4px!important; background-color: #b82525!important; }
/* .bar_bottom .hover{ display: none; } */
</style>